<template>
	<view class="pageWrapper">
		<view class="infoArea">
			<view class="infoLine">
				<view class="lineTitle">
					原手机号
				</view>
				<view class="lineValue">
					<view class="innerValue flex flex-align-center">
						{{ mobile }}
					</view>
				</view>
			</view>
			<view class="infoLine">
				<view class="lineTitle">
					新手机号
				</view>
				<view class="lineValue">
					<input class="innerValue flex flex-align-center" type="text" v-model="newMobile" />
				</view>
			</view>
			<view class="infoLine">
				<view class="lineTitle">
					验证码
				</view>
				<view class="lineValue">
					<input class="innerValue flex flex-align-center" type="text" v-model="code" />
					<view class="optBtn flex-all-center" @click="getMsgCode">
						{{msgCodeText}}
					</view>
				</view>
			</view>
		</view>
		<view class="confimBtn flex-all-center" @click="confirmEdit">
			确认修改
		</view>
		<view class="tipText" @click="contact">
			原手机号无法使用？
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="dialogStatus" @close="close" @open="open" mode="center">
			<view class="tipMsg">
				该手机号已注册,请更换其他手机号
			</view>
			<view class="knowBtn flex-all-center" @click="dialogStatus = false">
				知道了
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import API from '@/api/login.js'
	import {isPhone} from "./yl-utils/js_sdk/validate";
	import {showAlert,getStyleStr} from "./yl-utils/js_sdk/util";
	export default {
		data () {
			return {
				dialogStatus: false,
				mobile: '18841680688',
				newMobile: '',
				code: '',
				msgCodeText:'获取验证码'
			}
		},
		onLoad(e) {
			this.mobile = e.phone
		},
		methods: {
			async getMsgCode(){
			  if(this.hasSend){
			    showAlert('操作频繁，请稍后再试！')
			    return
			  }
			  this.$emit('reset')
			  if(!this.newMobile){
			    showAlert('手机号不能为空')
			    return
			  }
			  if(!isPhone(this.newMobile)){
			    showAlert('请输入正确手机号')
			    return
			  }
			  this.getCodTime()
			  typeof this.reqMobileCode === "function" &&  this.reqMobileCode(mobile,code)
			},
			getCode() {
				// let result = await reqMobileCode(mobile)
				if (!uni.$u.test.mobile(this.newMobile)) {
					uni.$u.toast('请输入正确手机号！');
					return;
				}
				console.log(this.newMobile);
				//发送验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				API.sendCode(
					this.newMobile
				).then((res) => {
					uni.$u.toast('发送成功！');
					if (parseInt(res.status) == 200) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			confirmEdit () {
				api.updateMobile({
					mobile:this.mobile,
					code:this.code,
					newMobile:this.newMobile
				}).then(res=>{
					uni.$u.toast('修改成功');
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
				this.dialogStatus = true
			},
			contact () {
				uni.navigateTo({
					url: '/pages/mine/contact'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.dialogStatus = false
				// console.log('close');
			},
			/**
			 * 获取倒计时
			 */
			getCodTime(){
			  let code=60
			  this.getCode()
			  this.msgCodeText=code + ' s'
			  this.hasSend=true
			  this.codeInterval=setInterval(()=>{
			    code--
			    this.msgCodeText=code+ ' s'
			    if(code<0){
			      clearInterval(this.codeInterval)
			      this.msgCodeText=this.msgCodeTextConfig.reCodeText || '重新发送'
			      this.hasSend=false
			    }
			  },1000)
			}
		},
		beforeDestroy(){
		  clearInterval(this.codeInterval)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		padding: 0 84rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		width: 670rpx;
		height: 400rpx;
		border-radius: 24rpx;
		overflow: hidden;
	}
	.pageWrapper {
		padding: 36rpx 40rpx 0;

		.infoArea {
			margin-top: 14rpx;

			.infoLine {
				display: flex;
				align-items: center;
				height: 114rpx;

				.lineTitle {
					text-align-last: justify;
					width: 120rpx;
					color: #282828;
					font-weight: bold;
					font-size: 30rpx;
				}

				.lineValue {
					margin-left: 30rpx;
					flex: 1;
					display: flex;
					align-items: center;
					height: 100%;

					.innerValue {
						flex: 1;
						height: 100%;
						border-bottom: 1rpx solid #CCC;
					}

					.optBtn {
						width: 178rpx;
						height: 64rpx;
						font-size: 24rpx;
						border-radius: 40rpx;
						color: #FFF;
						background-color: #03A2EC;
					}
				}
			}
		}
		.confimBtn {
			margin-top: 86rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			background: #03A2EC;
			color: #FFF;
		}
		.tipText {
			margin-top: 42rpx;
			color: #686868;
			font-size: 28rpx;
			text-align: center;
		}
		.tipMsg {
			margin-top: 140rpx;
			color: #282828;
		}
		.knowBtn {
			margin-top: 80rpx;
			width: 100%;
			height: 80rpx;
			background: #03A2EC;
			border-radius: 40rpx;
			color: #FFF;
			font-size: 30rpx;
		}
	}
</style>